<!DOCTYPE html>
<html>
	<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CloudLayer 构建SuperMap云地图</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script src="./libs/SuperMap.Include.js"></script>
</head>
	<body onload="init()">

    <div id="map" style="position: absolute; left: 0px; right: 0px; width: auto; height: 90%;"></div>
</body>
</html>
<!-- <script>
	
window.onload = function(){
	addVector();
}
</script> -->
    <script type="text/javascript">
        var map;
        var layer, vectors, markers,imgMarker,vectorss,imgone,imgtwo;//声明图层()
        var vectorInfoWin, markerInfoWin;
		var dataAdded = false;
        function init() {
            //初始化地图对象。
            map = new SuperMap.Map("map", {
                controls: [
                    new SuperMap.Control.Navigation(),
                   // new SuperMap.Control.Zoom(),
                    new SuperMap.Control.LayerSwitcher(),
                    new SuperMap.Control.MousePosition(),
					new SuperMap.Control.PanZoomBar()
                ],
                //地图所有图层都被当做叠加图层来使用。
                allOverlays: false
            });
            //通过向SuperMap云服务器发送请求得到SuperMap云服务发布的图层。
            layer = new SuperMap.Layer.CloudLayer();
            //构建 标记类覆盖物 图层。()
            markers = new SuperMap.Layer.Markers("Markers");
			imgone = new SuperMap.Layer.Markers("imgone");
			imgtwo = new SuperMap.Layer.Markers("imgtwo");
            //构建 矢量类覆盖物 图层。()
            vectors = new SuperMap.Layer.Vector("Vectors");
			vectorss = new SuperMap.Layer.Vector("Vectorss");
            //创建一个矢量选择要素的控件，在指定图层上单击鼠标选择矢量要素。
            var selectFeature = new SuperMap.Control.SelectFeature(vectorss,
                    {
                        onSelect: onFeatureSelected
                    });
            map.addControl(selectFeature);
            //激活控件。
            selectFeature.activate();
            //将 底图 和 两类覆盖物图层 添加到地图上。将所有图层添加到地图上
            map.addLayers([layer, vectors, markers,vectorss,imgone,imgtwo]); 
            //设置中心点，指定放缩级别。12691891.30842,3971965.30939    11339634.286396, 4588716.5813769
            map.setCenter(new SuperMap.LonLat(12691891.30842,3971965.30939),14);
			vector = new SuperMap.Layer.Vector("vector");//矢量要素
			addData();
        }
var x = 12691891.30842;
var y = 3971965.30939;
// function showNumber() {
// x++;
// y++;
// }
  //window.setInterval("addVector()",5000); 
 function addData() {
	 if (!dataAdded) {
		 vector.removeAllFeatures();

		 	//a.1. 生成一个矢量要素覆盖物，并添加到矢量图层。
		 		//构建点几何对象类
		 		var point = new SuperMap.Geometry.Point(x,y);
		 		//构建矢量要素覆盖物
		 		var pointVector = new SuperMap.Feature.Vector(point);
		 		//修改点样式红色
		 		pointVector.style = { fillColor: "red", strokeColor: "yellow", pointRadius: 6 };
		 		//添加 矢量要素覆盖物 到 矢量图层
		 		vectors.addFeatures(pointVector);
	         //a.1. 生成一个矢量要素覆盖物，并添加到矢量图层。  
		 		//构建点几何对象类
		 		var pointt = new SuperMap.Geometry.Point(12691910.30842,3971970.30939);
		 		//构建矢量要素覆盖物
		 		var pointVectorr = new SuperMap.Feature.Vector(pointt);
		 		//修改点样式红色
		 		pointVectorr.style = { fillColor: "black", strokeColor: "yellow", pointRadius: 6 };
		 		//添加 矢量要素覆盖物 到 矢量图层
		 		vectorss.addFeatures(pointVectorr);
		 	
		//SuperMap.Size 用来描绘一对高宽值的实例
		var size = new SuperMap.Size(160, 120);
		//依据size创建屏幕坐标
		//SuperMap.Pixel 此类用x, y坐标描绘屏幕坐标
		var offset = new SuperMap.Pixel(-(size.w / 1.8), -(size.h*1.1));
		//SuperMap.Icon 创建图标，在网页中表现为div标签中的image标签
		var icon = new SuperMap.Icon('./theme/images/ju.png', size, offset);
		//依据位置和大小初始化标记覆盖物
		imgMarker = new SuperMap.Marker(new SuperMap.LonLat(x,y), icon);
		//添加 标记覆盖物 到 标记图层
		markers.addMarker(imgMarker);
		//注册 click 事件,触发 mouseClickHandler()方法
		imgMarker.events.on({
			"click": mouseClickHandler
		});
				
           //SuperMap.Size 用来描绘一对高宽值的实例
           var sizee = new SuperMap.Size(30, 30);
           //依据size创建屏幕坐标
           //SuperMap.Pixel 此类用x, y坐标描绘屏幕坐标
           var offsett = new SuperMap.Pixel(-(sizee.w / 4), -(sizee.h *3.8));
           //SuperMap.Icon 创建图标，在网页中表现为div标签中的image标签
           var icons = new SuperMap.Icon('./theme/images/ju.png', sizee, offsett);
           //依据位置和大小初始化标记覆盖物
           imgMarkers = new SuperMap.Marker(new SuperMap.LonLat(x,y), icons);
           //添加 标记覆盖物 到 标记图层
           imgone.addMarker(imgMarkers);
           //注册 click 事件,触发 mouseClickHandler()方法
           imgMarkers.events.on({
           	"click": mouseClickHandler
           });
		   
		   //SuperMap.Size 用来描绘一对高宽值的实例
		   var siz = new SuperMap.Size(30, 30);
		   //依据size创建屏幕坐标
		   //SuperMap.Pixel 此类用x, y坐标描绘屏幕坐标
		   var offse = new SuperMap.Pixel(-(siz.w *2), -(siz.h *3.8));
		   //SuperMap.Icon 创建图标，在网页中表现为div标签中的image标签
		   var ico = new SuperMap.Icon('./theme/images/ju.png', siz, offse);
		   //依据位置和大小初始化标记覆盖物
		   imgMarkerss = new SuperMap.Marker(new SuperMap.LonLat(x,y), ico);
		   //添加 标记覆盖物 到 标记图层
		   imgtwo.addMarker(imgMarkerss);
		   //注册 click 事件,触发 mouseClickHandler()方法
		   imgMarkerss.events.on({
		   "click": mouseClickHandler
		   });
		 dataAdded = true;
}else {
            //widgets.alert.showAlert(resources.msg_loadedData, true, 240);
        }
	 
	 
	 
 }
       
        //a.2. 点击矢量要素覆盖物，触发调用此函数。
        function onFeatureSelected(feature) {
            closeVectorInfoWin();
            //创建一个具有指向和边框的浮动弹窗
            var popup = new SuperMap.Popup.FramedCloud(
                    "popwin",
                    new SuperMap.LonLat(x,y),
                    null,
                    "矢量要素覆盖物鼠标点击事件",
                    null,
                    true);
            vectorInfoWin = popup;
            //在地图中添加弹出窗口
            map.addPopup(popup);
        };
        //a.3. 销毁 Popup.FramedCloud 弹窗。
        function closeVectorInfoWin() {
            if (vectorInfoWin) {
                vectorInfoWin.hide();
                vectorInfoWin.destroy();
            }
        }
        //b.1. 按钮生成一个标记覆盖物，注册click事件，并添加到标记图层。
//         function addMarker() {
//            
//         }


//var data = "仓库"
var text='<div style="width:200px;">'
+'<p>仓库：<span>11</span></p>'
+'<p>可用库存量：<span>1221</span></p>'
+'</div>'
			    	//	 $("#checkloginhtml").html(text); 
        //b.2. 点击标记覆盖物，触发click事件会调用此函数。
        function mouseClickHandler(event) {
            closeMarkerInfoWin();
            //构建固定位置浮动弹窗，自适应显示
            var popup = new SuperMap.Popup.Anchored(
                  "marker", //唯一标识
                  imgMarkers.getLonLat(), //标记覆盖物的坐标
                  new SuperMap.Size(220, 140),
                  text,
                  null,
                  true,
                  null);
            popup.autoSize = true;
            markerInfoWin = popup;
            map.addPopup(popup);
        }
        //b.3. 销毁 Popup.Anchored 弹窗。
        function closeMarkerInfoWin() {
            if (markerInfoWin) {
                markerInfoWin.hide();
                markerInfoWin.destroy();
            }
        }

        //c.1. 地图放大 ，在当前缩放级别的基础上放大一级。
        function mapEnlarge() {
            map.zoomIn();
        }
        //c.2. 地图缩小，在当前缩放级别的基础上缩小一级。
        function mapReduce() {
            map.zoomOut();
        }
        //c.3. 地图平移 ，根据指定的屏幕像素（-20，-8）值平移地图。
        function mapPan() {
            map.pan(-20, -8);
        }

        //d.1. 设置图层可见性。
        function layerShowOrHide() {
            var temp = document.getElementById("isShow").value;
            if (temp == '隐藏') {
                layer.setVisibility(false)
                document.getElementById("isShow").value = '显示';
            } else {
                layer.setVisibility(true);
                document.getElementById("isShow").value = '隐藏';
            }
        }
        //d.2. 移除图层，不可恢复。
        function layerRemove() {
            map.removeLayer(layer);
        }
	
    </script>